<template>
	<view class="articleList-wrap">
		<u-search class="search-input" placeholder="搜索疾病/症状/药品名" @click="gotoRouter('/pages/search/search?activeTab=3')"></u-search>

		<!-- <image class="articleList-ikon" src="http://k8s.vendingtech.vip/images/banner.png"></image> -->
		<view class="articleList-ikon">
			<u-banner ></u-banner>
		</view>

		<view class="articleList-group" v-if="articleClass">
			<u-tabs v-model="activeTab" :scroll="false" :tabs="articleTab" @change="tabChange"></u-tabs>

			<view class="articleList-article-scroll"><u-article-item v-for="(item, index) in articleList" :key="index" :data="item"></u-article-item></view>
		</view>
	</view>
</template>

<script>
import uSearch from '@/components/u-search/u-search.vue';
import uTab from '@/components/u-tabs/u-tabs.vue';
import uArticleItem from '@/components/u-article-item/u-article-item.vue';
import uBanner from '@/components/u-banner/u-banner.vue';
export default {
	components: {
		uSearch,
		uTab,
		uArticleItem,
		uBanner
	},
	data() {
		return {
			activeTab: 0,
			articleClass: null, //
			articleTab: [],
			articleList: []
		};
	},
	onLoad(option) {
		this.queryDictItemsByCode();
	},
	onShow() {},
	methods: {
		tabChange(e) {
			this.activeTab = e;
			this.queryArticleList();
		},
		//文章列表
		queryArticleList() {
			this.$api
				.queryArticleList({
					params: {
						category: this.activeTab,
						pageSize: 999
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.articleList = res.result.records;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		},

		//文章分类
		queryDictItemsByCode() {
			this.$api
				.queryDictItemsByCode({
					params: {
						code: 'article_category'
					}
				})
				.then(res => {
					this.articleClass = res;

					this.articleClass.forEach(key => {
						this.articleTab.push(key.text);
					});

					this.queryArticleList();
				});
		}
	}
};
</script>

<style lang="less">
@import './articleList.less';
</style>
